<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-date-picker
          v-model="searchObj.begin"
          type="date"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.end"
          type="date"
          placeholder="选择截止日期"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-button
        :disabled="btnDisabled"
        type="primary"
        icon="el-icon-search"
        @click="showChart()">查询</el-button>
    </el-form>

    <el-row>
      <el-col :span="12">
        <div id="register_num" class="chart" style="height:500px;" />
      </el-col>
      <el-col :span="12">
        <div id="login_num" class="chart" style="height:500px;" />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div id="video_view_num" class="chart" style="height:500px;" />
      </el-col>
      <el-col :span="12">
        <div id="course_num" class="chart" style="height:500px;" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import statisticsApi from '@/api/statistics'
import echarts from 'echarts'

export default {
  data() {
    return {
      searchObj: {},
      btnDisable: false
    }
  },
  methods: {
    initEchart(divId, dates, data, title) {
      var myChart = echarts.init(document.getElementById(divId))
      var option = {
        title: {
          text: title
        },
        // x轴是类目轴（离散数据）,必须通过data设置类目数据
        xAxis: {
          type: 'category',
          data: dates
        },
        // y轴是数据轴（连续数据）
        yAxis: {},
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
          // 系列中的数据内容数组
          data: data,
          // 折线图
          type: 'line'
        }]
      }
      myChart.setOption(option)
    },
    showChart() { // 查询数据
      this.btnDisabled = true
      statisticsApi.getStat(this.searchObj.begin, this.searchObj.end).then(r => {
        const dates = r.data.dates
        const registNumList = r.data.registNumList
        const loginNumList = r.data.loginNumList
        const courseNumList = r.data.courseNumList
        const videoViewNumList = r.data.videoViewNumList
        // 在echart中展示数据列表
        this.initEchart('register_num', dates, registNumList, '注册数量')
        this.initEchart('login_num', dates, loginNumList, '登录数量')
        this.initEchart('course_num', dates, courseNumList, '课程发布数量')
        this.initEchart('video_view_num', dates, videoViewNumList, '视频播放数量')
      })
    }
  }
}
</script>
